<script lang='ts' setup name='App'>  
 import { ref } from 'vue' 
 import type { User } from "@/types";


 const userList = ref<User[]>([
  {id:'asdasfas01', username:'amin' ,password:'123546' , nickname:'管理员'},
  {id:'asdasfas02', username:'root' ,password:'987654321' , nickname:'超级管理员'},
  { id:'asdasfas03',username:'jshand' ,password:'@!#$%^&*()' , nickname:'管理员1'},
  {id:'asdasfas04', username:'superman' ,password:'123qweasdzxc' , nickname:'管理员2'},
 ])


 const user = ref<User>(
  { id:'asdfasfdasdasf',username:'amin' ,password:'123546' , nickname:'管理员'},
 )




</script>  
  
<template>  

  <h3>遍历数组</h3>
    <ul>
          <li v-for="(user ,index) in  userList">{{ index+1 }} :{{ user.username }} ,{{ user.password }},{{ user.nickname }} </li>
    </ul>

    <ol>
          <li v-for="(user ) in  userList" :key="user.id">{{ user.username }} ,{{ user.password }},{{ user.nickname }} </li>
    </ol>
    <hr>
    <br>
    <h3>遍历对象</h3>
    <ul>
          <li v-for="(value,key) in  user">
            {{ key }} {{ value }}
          </li>
    </ul>



    <!-- for(let i = 0 ;i<10;i++){

    } -->

    <ul>
          <li v-for="num  in  10">
              {{ num }}
          </li>
    </ul>

   






</template>  
  
<style scoped>  

li{
  margin: 10px;
  border-bottom: dashed 1px grey;
}
</style>  